<template>
    <section class="event_group">
        <aside class="aside">
            <div>
                团队信息 <Icon size="20" class="icon" style="position:relative;left:70%;" type="ios-paper" />
            </div>
            <Avatar class="avatar" style="margin:20px auto;width:120px;height:120px" src="https://i.loli.net/2017/08/21/599a521472424.jpg"/>
            <p style="font-size:14px;color:rgba(51,51,51,1);text-align:center;">{{ eventGroup.group_name }}</p>
            <p>当前成员数: {{ eventGroup.member_count }}</p>
            <p>{{ eventGroup.desc ? eventGroup.desc : '这个团队还没有填写介绍'}}</p>
            <Button @click="level">离开团队</Button>
            <Button @click="sendEmailModal = true" type="primary">邀请加入</Button>
        </aside>
        <article class="article">
            <figure v-for="(value,index) in groupData" :key="index">
                <Avatar class='avatar' style="width:80px;height:80px" :src="'/preImages/' + value.header_path"/>
                <div class="info">
                    <span>{{ value.user_name }}</span><span v-if="value.ismanager === 1" style="margin-left:20px;">[队长]</span>
                    <p>{{value.city ? value.city : '-'}}</p>
                    <span>{{ value.working_unit}}</span>
                    <Icon @click='delMember(value.group_id,value.user_id)' class="icon" size="20" type="md-trash" v-if="isShow && index > 0"/>
                    <span v-if="isShow && index > 0">移除成员</span>
                </div>
            </figure> 
        </article>
        <!-- 邀请加入弹框 -->
        <Modal
            v-model="sendEmailModal"
            :mask-closable="false"
            width="600"
            title="邀请加入"
            :footer-hide="true"
           >
            <Input placeholder="邮箱" type="email" v-model="input_email" clearable style="width:250px"/>
            <Button type="primary" style="margin-left:10px" @click="invite">邀请</Button>
            <hgroup style="font-size:16px;margin-top:20px;">邀请记录</hgroup>
            <article style="padding-bottom:20px;display:flex;flex-wrap:wrap;">
                <div v-for="(value,index) in groupData" :key="index" style="margin:20px 0 0 20px;">
                    <span style="display:inline-block;width:150px;text-align:center;border:1px solid rgba(185,185,185,1);border-radius:6px;">
                        {{ value.user_email }}
                    </span><Icon @click='delHistory(index)' ref="icon" class='icon' type="md-close" size="15"/>
                </div>
            </article>
        </Modal>
    </section>
</template>
<script>
import { mapActions, mapGetters } from 'vuex';
export default {
    name:"eventGroup",
    props:['id'],
    data(){
        return{
            sendEmailModal:false,
            groupData:[],
            isShow:false,
            input_email:'',
        }
    },
    computed:{
        ...mapGetters({
            eventGroup:"info"
        })
    },
    methods:{
        ...mapActions(['XgetMyGroup','XgetGroupMember','XdeleteMember','XinviteMember','XleaveGroup']),
        delHistory(index){
            let parentDom = this.$refs['icon'][index].$el.parentNode;
            parentDom.remove()
        },
        iconIsShow(){
            this.groupData.forEach(element => {
                if(Number(element.ismanager) === 1 && element.is_login){
                    this.isShow = true
                }
            }) 
        },
        delMember(group_id,user_id){
            this.XdeleteMember({group_id,user_id});
            this.nextTick()
        },
        invite(){
            this.XinviteMember({
                competitionId:this.id,
                email:this.input_email,
                groupId:this.eventGroup.group_id,
            }).then(res=>{
                this.$Message.success("邀请成功");
                this.nextTick();
                this.sendEmailModal = false;
            }).catch(err => {
                this.$Message.error(err.response.data.message);
            })
        },
        level(){
            this.XleaveGroup(this.eventGroup.group_id).then(res=>{
                this.$Message.success("退出成功");
                this.$store.commit("CHANGE_INDENT");
            }).catch(err => {
                this.$Message.error(err.response.data.message);
            })
        },
        async nextTick(){
            await this.XgetMyGroup(this.id);
            this.XgetGroupMember(this.eventGroup.group_id).then(val => {
                this.groupData = val.data
            })
            this.iconIsShow()
        }
    },
    mounted() {
        this.$nextTick(()=>{
            this.nextTick()
        })  
    }
}
</script>
<style lang="scss" scoped>
    .event_group{
        width: 1200px;
        margin: 0 auto 43px;
        border:1px solid #f7f7f7;
        display: flex;
        .avatar{
                display: block;
                border-radius: 50%;
        }
        .aside{
            width:293px;
            border-right: 1px solid #f7f7f7;
            padding-bottom: 20px;
            text-align: center;
            div{
                font-size:14px;
                color:rgba(51,51,51,1);
                padding:20px;
                border-bottom:1px solid #dcdee2;
                text-align: left;
            }
            p{
                font-size:12px;
                color:rgba(102,102,102,1);
                margin: 40px auto;
            }
        }
        .article{
            width:807px;
            display: flex;
            flex-direction: column;
            figure{
                display: flex;
                padding: 40px;
                .info{
                    margin-left:40px;
                    p{
                        margin:10px 0;
                    }
                    .icon{
                        margin-left:400px;
                    }
                }
            }
        }
    }
</style>